<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/3/29
  Time: 20:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>注册页面</title>
  <style>
  </style>
</head>
<body>
<div style="position:relative">
  <div style="display: flex">
    <div style="display: inline;">
      <span id="warn" style="font-size: 15px;color: red;font-weight: 500;">${warn}</span><br>
      <form action="http://localhost:8080/ExaminationManagement1_war/Registe" method="post">
        <div>
          <label for="username" class="tip" style="width: 50px;">用户名</label>
          <input type="text" name="username" id="username" placeholder="用户名" maxlength="10"
                 style="margin-bottom: 20px;"><br>
        </div>
        <div style="margin-left: 16px;">
          <label for="password" style="width:50px">密码</label>
          <input style="margin-bottom: 20px;" type="password" name="password" id="password" maxlength="16"
                 placeholder="密码(可含字母,数字,下滑线,8-16位)"><br>
        </div>
        <div style="margin-left: -18px;">
          <label for="okpassword" style="width:50px">确认密码</label>
          <input style="margin-bottom: 20px;" type="password" name="okpassword" id="okpassword"
                 maxlength="16" placeholder="再次输入密码"><br>
        </div>
        <div><label for="checkcodeinput" style="width: 50px;">验证码</label>
          <input type="text" maxlength="4" placeholder="验证码" name="checkcode" id="checkcodeinput">
        </div>
        <div style="display: flex;">
          <label for="teacher">老师</label>    <input type="radio" value="1" name="isteacher" id="teacher">
          <label for="student">学生</label>   <input type="radio" value="2" name="isteacher" id="student" checked><br>
        </div> <input type="text" placeholder="老师身份码" name="identify" id="identify" hidden="false"><br>
        <input type="submit" value="注册" id="registe">
      </form>
      <div>
        <a href="aboutme.jsp">关于我们</a>
      </div>
    </div>
    <div style="width: 250px;height: 50px;margin-top:130px;margin-left: 20px;display:inline">
      <img src="http://localhost:8080/ExaminationManagement1_war/GetCheckcode" onclick="changecode()" id="checkcodeimage">
    </div>
  </div>
</div>
</body>
<script>
  function changecode() {
    var changecode = document.getElementById("checkcodeimage")
    changecode.src = "http://localhost:8080/ExaminationManagement1_war/GetCheckcode?"+new Date().getMilliseconds()
  }
  var username = document.getElementById("username")
  var warn = document.getElementById("warn")
  username.onblur = function () {
    let value = username.value.trim()
    var flag1 = false
    if (value) {
      warn.innerHTML = ""
      flag1 = true
    } else {
      warn.innerHTML = "用户名不能为空"
    }
  }
  var password = document.getElementById("password")
  password.onblur = function () {
    let value = password.value
    var flag2 = false
    let reg = /^\w{5,10}$/
    if (reg.test(value)) {
      warn.innerHTML = ""
      flag2 = true
    } else {
      warn.innerHTML = "密码格式不正确"
    }
  }
  var okpassword = document.getElementById("okpassword")
  okpassword.onblur = function () {
    var flag4 = false
    let value = okpassword.value
    if (value == password.value) {
      warn.innerHTML = ""
      flag4 = true
    } else {
      warn.innerHTML = "密码不一致"
    }
  }

  var teacher=document.getElementById("teacher")
  var sign=false
  teacher.onclick=function(){
    var identify= document.getElementById("identify")
    identify.hidden=false
    identify.onblur=function(){
      var reg=/^\d{8}$/
      if(reg.test(identify.value)){
        warn.innerHTML=""
      }else{
        warn.innerHTML="身份码格式不正确"
      }
    }
  }
  var student=document.getElementById("student")
  student.onclick=function(){
    identify.hidden=true
    warn.innerHTML=""
  }

  var registe = document.getElementById("registe")
  registe.onsubmit=function(){
    if (flag1 && flag2 && flag3) {
      return true
    } else {
      return false
    }
  }
</script>
</html>
